<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8"/>
        <title>VueUI-table</title>
		<!--
        <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
		-->
        <link href="../../lib/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <link href="../../lib/vue/vueui/vueUI.css" rel="stylesheet">
		<!--
        <link href="table.css">
		-->
        <style type="text/css">

        </style>
    </head>
    <body id="tableTest">
        <div style="padding:20px">
            <vue-table v-with="config:tableConf" vue-id="myTable"></vue-table>
        </div>

        <div  v-repeat="a:arr">
            <div>{{a}}</div>
        </div >
        
        <button class="btn btn-default" v-on="click:getData">获取数据</button>
        <button class="btn btn-default" v-on="click:clearData">清空数据</button>
    </body>
</html>
<script src="../../lib/jquery/jquery-2.1.4.min.js"></script>
<!--
<script src="../../lib/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-->
<script src="../../lib/vue/0.10.6/vue.js"></script>
<script src="../../lib/vue/vueui/vueUI.js"></script>
<script>
//--------------------------------------------------------------
// author zhangwei on 2015.08.09
// - Released version v1. This version uses Backbone.js
//--------------------------------------------------------------

var tableConf = {
    //isShowHead : false,
    //isShowFoot : false,
    isCheckable : true,
    columns : [
        {'field':'name', 'isSortable':true, 'textAlign':'center', 'textAlign2':'left'},
        'math',
        'chinese',
        {'field':'english', 'text':'英语', 'textAlign2':'center','isSortable':true},
        'operate'
    ],
    onPagerChange : function (num){
        getData(num)
    },
    onSortChange : function (field, dir){
        console.log(field)
        console.log(dir)
    },
    myAlert : function (num){
        alert(num)
    },
    data : []
}

function _getData(pagerNum){
    var myTable = VueUI.getComponent('myTable')

    var data = []
    for (var i=0; i<10; i++){
        data.push(
            {
                name:pagerNum+'_张三'+i,
                math:98,
                chinese:90,
                english:95,
                operate:'<a href="javascript:;" v-on="click:myAlert(\'' + 98 +'\')">详情</a>'
            }
        )
    }
    VueUI.resetArray(tableConf.data, data)
    myTable.totalPage = 10
    myTable.totalCount = 234
    myTable.onPagerChange = function (num){
        getData(num)
        console.log(pagerNum + '_' + num)
    }
}

function getData(pagerNum){
    setTimeout(function (){
        _getData(pagerNum)
    }, 100)
}

x = new Vue({
    el : '#tableTest',
    data : {
        tableConf : tableConf,
        arr : []
    },
    methods : {
        getData : function (){
            getData(1)
        },
        clearData : function (){
            var myTable = VueUI.getComponent('myTable')
            VueUI.resetArray(tableConf.data, [])
            //tableConf.data = []
            //tableConf.data = []
            //myTable.data = []
            myTable.totalPage = 0
            myTable.totalCount = 0
        }
    }
})

getData(1)
</script>
